<template>
    <div class = 'cinema'>
        <router-view></router-view>
        <div class = 'Ctop'>
                <div>
                   <div class = 'pos'>
                       <div @click = 'posClick'>
                           {{cityName}}
                           <i class = 'iconfont icon-xiajiantou'></i>
                       </div>
                   </div>
                   <i>影院</i>
                   <div class = 'search' >
                       <router-link :to='{path : "/cinema/cSearch" ,query:{cityId : cityId,cityName:cityName}}'>
                       <i class = 'iconfont icon-sousuo'></i>
                       </router-link>
                   </div>
                </div>
        </div>
        <!-- <my-search v-bind:issearch = 'issearch' v-on:mback = 'myback' v-bind:cityId = 'cityId'></my-search> -->
        <div class = 'Ctab' v-if = '!isPosClick && !issearch && showbottom'>
            <div @click = 'tabClick1' :class = '{active:istabClick1}'>
                <span>{{tab1}}</span>
                <i class = 'iconfont icon-xiajiantou'></i>
            </div>
            <div @click = 'tabClick2' :class = '{active:istabClick2}'>
                <span>{{tab2}}</span>
                <i class = 'iconfont icon-xiajiantou'></i>
            </div>
            <div @click = 'tabClick3' :class = '{active:istabClick3}'>
                <span>{{tab3}}</span>
                <i class = 'iconfont icon-xiajiantou'></i>
            </div>
        </div>
        <div class = 'hiddenOption'>
                <ul>
                    <li v-for = '(item,index) in district' v-bind:key='index' @click = 'choose(item)'>{{item.name}}</li>
                    <li v-if="!district">暂无</li>
                </ul>
                <ul>
                    <li v-for = '(item,index) in hallType' v-bind:key='index' @click = 'choose(item)'>{{item.name}}</li>
                    <li v-if="!hallType">暂无</li>
                </ul>
                <ul>
                    <li v-for = '(item,index) in service' v-bind:key='index' @click = 'choose(item)'>{{item.name}}</li>
                    <li v-if="!service">暂无</li>
                </ul>
        </div>
        <div class = 'Clist' v-if = '!isPosClick && !issearch && showbottom &&!iswait'>
            <ul>
                <li v-for = '(item,index) in cinemaList' v-bind:key='index'>
                    <router-link :to = '{path:"/cdetail",query:{id:item.cinemaId,Cname:cityName,Cid:cityId}}'>
                                
                    <div class = 'Clist-left'>
                        <div class = 'Clist-name'>{{item.title}}</div>
                        <div class = 'Clist-location'>{{item.location}}</div>
                    </div>
                    <div class = 'Clist-right'>
                        <div class = 'Clist-price'>
                            <span>¥{{item.price.n}}</span>
                            <span class = 'priceText'>起</span>
                        </div>
                        <div class = 'Clist-distance'>{{item.distance}}</div>
                    </div>
                    </router-link>
                </li>
                <div v-if = 'cinemaList.length != 0 '>我也是有底线的~</div>
            </ul>
            <div v-if = 'cinemaList.length == 0 && !iswait' class = 'showNone'>
                        暂无影厅~
            </div>
        </div>
        <div v-if = 'iswait' class = 'wait'>
            <waiting></waiting>
        </div>
        <div v-if = 'isPosClick'>
            <city v-bind:isclick = 'isPosClick' v-bind:mycity = 'cityName' v-on:child-click='myClick'></city>
        </div>
        
        <my-bottom v-bind:flag = 1 v-bind:Ccity = 'cityName' v-bind:CId = 'cityId' v-if = 'showbottom'></my-bottom>
    </div>    
</template>
<script>
import myBottom from '@/components/myBottom.vue';
import city from '@/components/city.vue';
import waiting from '@/components/waiting.vue';
import $ from 'jquery';
export default {
    data(){
        return {
            district : [],
            hallType : [],
            service : [],
            cinemaList : [],
            cityName : '广州',
            cityId : 20,
            isPosClick : false,
            istabClick1 : false,
            istabClick2 : false,
            istabClick3: false,
            tab1 : '全部',
            tab2 : '影厅类型',
            tab3 : '影院服务',
            districtId: '-1',
            hallTypeId: '-1',
            serviceId: '-1',
            issearch : false,
            showbottom : true,
            iswait : true,
            heightArr : [0,0,0],
            isfirst : true,
        }
    },
    methods:{
        cityFun(id){
            this.istabClick1 = false;
            this.istabClick2 = false;
            this.istabClick3 = false;
                axios.get(`https://apis.netstart.cn/maoyan/index/filterCinemas?ci=${id}`)
                           .then(
                                data=> {
                                    // console.log(data.data)
                                    if(data.data.district){
                                        this.district = data.data.district.subItems;
                                    }else{
                                        this.district = '';
                                    }
                                    if(data.data.hallType){
                                        this.hallType = data.data.hallType.subItems;
                                    }else{
                                        this.hallType = '';
                                    }
                                    if(data.data.service){
                                        this.service = data.data.service.subItems;
                                    }else{
                                        this.service = '';
                                    }
                                }
        )
        },
        cinemaFun(id,districtId,hallTypeId,serviceId){
            let date = new Date();
            let str = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
            // console.log(str);
            axios.get(`https://apis.netstart.cn/maoyan/index/moreCinemas?day=${str}&offset=0&limit=20&districtId=${districtId}&lineId=-1&hallType=${hallTypeId}&brandId=-1&serviceId=${serviceId}&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=${id}&lat=23.135636443326355&lng=113.42422402238324`)
               .then(
                    data=> {
                        // console.log(data.data)
                        this.cinemaList = data.data;
                        this.iswait = false;
                        this.isfirst = true;
                    }
            )
        },
        posClick(){
            this.isPosClick = true;
        },
        myClick(res){
            this.isPosClick = res.Cclick;
            this.cityName = res.cityResult;
            this.cityId = res.cityId;
            this.districtId =  '-1';
            this.tab1 = '全部';
            this.tab2 = '影厅类型';
            this.tab3 = '影院服务';
            this.iswait = true;
            this.cityFun(this.cityId);
            this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
        },
        tabClick1(){
            this.istabClick1 = !this.istabClick1;
            this.istabClick2 = false;
            this.istabClick3 = false;
            if(this.istabClick1 == true){
                this.init();
                this.showAnimation(0);
            }else{
                this.hideAnimation();
            }
        },
        tabClick2(){
            this.istabClick2 = !this.istabClick2;
            this.istabClick1 = false;
            this.istabClick3 = false;
            if(this.istabClick2 == true){
                this.init();
                this.showAnimation(1);
            }else{
                this.hideAnimation();
            }
        },
        tabClick3(){
            this.istabClick3 = !this.istabClick3;
            this.istabClick1 = false;
            this.istabClick2 = false;
            if(this.istabClick3 == true){
                this.init();
                this.showAnimation(2);
            }else{
                this.hideAnimation();
            }
        },
        showAnimation(ind){
            // console.log($('.hiddenOption').children().eq(ind))
            // console.log($('.hiddenOption').children().eq(ind))
            $(".hiddenOption").css('overflow',"initial");
            $('.hiddenOption').children().hide();
            $('.hiddenOption').children().eq(ind).show().height(0).animate({
                "height" : this.heightArr[ind]+'px'
            })
        },
        hideAnimation(ind){
            $('.hiddenOption').children().hide();
        },
        choose(item){
            this.iswait = true;
            if(this.istabClick1){
                // console.log("全部");
                this.tab1 = item.name;
                this.districtId = item.id;
                this.istabClick1 = false;
                this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
            }else if(this.istabClick2){
                // console.log("类型");
                this.tab2 = item.name;
                this.hallTypeId = item.id;
                this.istabClick2 = false;
                this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
            }else{
                // console.log("服务");
                this.tab3 = item.name;
                this.serviceId = item.id;
                this.istabClick3 = false;
                this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
            }
                this.hideAnimation();
        },
        init(){
            // console.log($('.hiddenOption>ul'));
            if(this.isfirst == true){
                this.heightArr[0] = $('.hiddenOption>ul').eq(0).height();
                this.heightArr[1] = $('.hiddenOption>ul').eq(1).height();
                // console.log(this.heightArr[1])
                this.heightArr[2] = $('.hiddenOption>ul').eq(2).height();
                this.isfirst = false;
            }
            
        }
    },
    created(){
        this.cityName = localStorage.getItem('cityName') || this.$route.query.name;
        this.cityId = localStorage.getItem('cityId') ||this.$route.query.id;
        this.cityFun(this.cityId);
        this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
    },
    components:{
        myBottom,
        city,
        waiting,
    },
    beforeRouteUpdate(to, from, next) {
        // console.log(to)
        if(to.name == 'cSearch'){
            this.showbottom = false;
        }else if(to.name == 'Cinema'){
            // console.log(to)
            this.showbottom = true;
            this.cityName = to.query.name;
            this.cityId = to.query.id;
            
            this.cityFun(this.cityId);
            this.cinemaFun(this.cityId,this.districtId,this.hallTypeId,this.serviceId);
        }
        next();
    },
}
</script>
<style lang = 'scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.cinema{
    padding-top : 101px;
    .Ctop{
        width : 100%;
        height : 50px;
        line-height: 50px;
        position : fixed;
        top : 0;
        background-color : white;
        >div{
            position:relative;
            text-align:center;
            .pos{
                position : absolute;
                top : 10px;
                left : 10px;
                z-index : 99;
                width : 60px;
                height : 30px;
                text-align : center;
                line-height : 30px;
                font-size : 8px;
                div{
                    width : 50px;
                    margin : 0 auto;
                    padding : 0 3px;
                    box-sizing : border-box;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                i{
                     position : absolute;
                    top : 0;
                    right : 0px;
                }
            }
            >i{
                color : #374140;
            }
            .search{
                position : absolute;
                top : 10px;
                right : 10px;
                width : 60px;
                height : 30px;
                text-align : center;
                line-height : 30px;
                i{
                    font-size : 26px;  
                    color : #acf0f2;
                }
            }
        }
    }
    .Ctab{
        margin-top:52px;
        background-color : white;
        display : flex ;
        position :fixed;
        top : -2px;
        width : 100%;
        border-top : 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        >div{
            height : 50px;
            line-height : 50px;
            flex-basis : 33.33%;
            text-align : center;
            color : #3e606f;
            position : relative;
            span{
                font-size : 18px;
                display : inline-block;
                max-width : 75px;
                text-align :center;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            i{
                position : absolute;
                top : 2px;
            }
            i.up{
                display : inline-block;
                transform : rotateX(180deg);
            }
        }
        >div.active{
            color : #ff9900;
            i{
                display : inline-block;
                transform : rotateX(180deg);
            }
        }
    }
    .hiddenOption{
        font-size : 18px;
        position : fixed;
        width : 100%;
        height : 0;
        overflow: hidden;
        /* overflow: initial; */
        ul{
            background-color : white;
            padding: 10px;
            border-radius : 5px;
            border-bottom : 1px solid #ccc;
            display: flex;
            flex-wrap: wrap;
            li{
                font-size : 12px;
                /* float : left; */
                width : 20%;
                margin : 5px;
                height : 30px;
                padding : 2px;
                line-height : 30px;
                text-align : center;
                border : 1px solid #f4f4f4;
                border-radius : 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .Clist{
        margin-bottom : 60px;
        >ul{
            >li{
                background-color : white;
                margin : 2px 0;
                padding : 10px;
                &::after{
                    content : '';
                    display : block;
                    clear : both;
                }
                .Clist-left{
                    width: 80%;
                    float : left;
                    >div{
                         overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .Clist-name{
                        font-size : 16px;
                        color : #8a0917;
                    }
                    .Clist-location{
                        margin-top : 5px;
                        font-size : 14px;
                        color : grey;
                       
                    }
                }
                .Clist-right{
                    width: 16%;
                    float : right;
                    .Clist-price{
                        width : 100%;
                        font-size : 16px;
                        color : #ff9900;
                        .priceText{
                            font-size : 12px;
                        }
                    }
                    .Clist-distance{
                        margin-top : 5px;
                        font-size : 14px;
                        color : grey;
                    }
                }
            }
            >div{
                height : 50px;
                line-height : 50px;
                text-align : center;
                font-size : 18px;
                color : gray;
            }
        }
        .showNone{
            height : 300px;
            text-align : center;
            line-height : 300px;
            color : #ccc;
        }
    }
    .wait{
        height : 300px;
        line-height:300px;
        text-align : center;
        color : gray;
    }
}
</style>

